<template>
  <div class="cont zommfullscreen">
    <div class="bgimg"></div>
    <div class="content" id="zoomchild">
      <onem ref="refv" :vid="props.vid" />
      <!-- <el-icon class="btn" size="30" v-if="!state.isfull" @click="full"><FullScreen /></el-icon>
      <el-icon class="btn" size="30" v-if="state.isfull" @click="minx"><CircleClose /></el-icon> -->
    </div>
    <!-- <ptz class="ptz" :vid="props.vid" /> -->
  </div>
</template>

<script setup>
const props = defineProps({
  vid: String,
});
const emit = defineEmits(["close", "full"]);
const refv = ref();
const state = reactive({
  isfull: false,
});
const full = () => {
  state.isfull = true;
  emit("full");
  refv.value.resize();
};
const minx = () => {
  state.isfull = false;
  emit("close");
  refv.value.resize();
};
onMounted(() => {
  document
    .getElementById("zoomchild")
    .addEventListener("keydown", function (event) {
      event.stopPropagation();
      if (event.key === "Escape") {
        minx();
      }
    });
});
</script>

<style lang="scss" scoped>
.full2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.btn {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}
.cont {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 5px #000000cc;
  position: relative;
  .content {
    width: 100%;
    height: 100%;
  }
  .ptz {
    position: fixed;
    right: 5%;
    bottom: 5%;
  }
}

.zommfullscreen {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;

  .bgimg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("/images/new/outborder.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
  }
}
</style>